<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息 22001010525-王婕</title>
    <script src="./wang_fonts/iconfont.js"></script>
    <link rel="stylesheet" href="wang_css/xiaoxi.css">
</head>
<body>
    <header class="wang_header">
        <nav class="top-navigation">
            <a href="#" class="nav-item discover-group">发现群</a>
            <a href="#" class="nav-item dynamic">动态</a>
            <a href="#" class="nav-item message active">消息</a>
            <a href="#" class="nav-item clean-icon">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qingsao"></use>
              </svg>
            </a>
            <a href="#" class="nav-item settings-icon">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shezhi"></use>
                </svg>
            </a>
        </nav>
    </header>
    <main class="wang_main">
        <!-- js -->
        <ul class="zlist1"></ul>
            <ul class="zlist2"></ul>
            <!-- 下导航 -->
            <nav class="wang_nav">
                <ul>
                    <li>
                        <a href="weibo(guanzhu).html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shouye1"></use>
                            </svg>
                            <p>微博</p>
                        </a>
                    </li>
                    <li>
                        <a href="shipin.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shipin"></use>
                            </svg>
                            <p>视频</p>
                        </a>
                    </li>
                    <li>
                        <a href="faxian.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-sousuo1"></use>
                            </svg>
                            <p>发现</p>
                        </a>
                    </li>
                    <li>
                        <a href="xiaoxi.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi2"></use>
                            </svg>
                            <p>消息</p>
                        </a>
                    </li>
                    <li>
                        <a href="wo.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wo"></use>
                            </svg>
                            <p>我</p>
                        </a>
                    </li>
                </ul>
            </nav>    
    </main>
    <footer class="wang_footer">
        <script>
            const ur2=`http://rap2api.taobao.org/app/mock/321669/xiaoxi1`
            //dom
            const zlist=document.querySelector('.zlist1')
            // 使用fetch获得url，并加入到list中
            fetch(ur2)
            .then(res=>res.json())
           .then(data=>{
               data.forEach(item=>{
                   zlist.innerHTML+=`
                   <li>
                   <img src="${item.imgSrc}">
                   <div class="ztxt">
                       <h2>${item.title}</h2>
                   </div>
               </li>
                   `
               })
           })
           const ur3=`http://rap2api.taobao.org/app/mock/321669/xiaoxi2`
           //dom
           const zlist2=document.querySelector('.zlist2')
           // 使用fetch获得url，并加入到list中
           fetch(ur3)
          .then(res=>res.json())
        .then(data=>{
             data.forEach(item=>{
                 zlist2.innerHTML+=`
                 <li>
                 <img src="${item.imgSrc}">
                 <div class="ztxt">
                     <h3>${item.mainTitle}</h3>
                     <div>
                         <h4>${item.subTitle}</h4>
                         <h5>${item.time}</h5>
                     </div>
                 </div>
             </li>
                 `
             })
         })
        </script>
    </footer>
</body>
</html>
